Hello and welcome.
In this lecture we are going to create the functionality for our app using javascript.
All right.
This is hard javascript far and the first thing I'm going to do is define the balloons using variables.
So I'm going to grid variables for each of the balloons.
So I have created variables for each of the balloon.
So starting with like one here year variable called Balance zero and setted two equals two.
The documents don't get element by either the function or method and we've passed it.
The tool parameter for the balloon so that the balloon the actual balloon can be accessed via the parameter
with past is so entirely and this is here.
We've passed the doubtful value off the balloon itself saw slam one is the start all of variables right.
OP to lie in.
Twenty three.
Cause they have 24 balloons.
The first one being is zero.
So send them all up the same variable name variable.
Balloon 23 and so on and said it to quasi to did documental get a limit either.
This method is what is used to access the outroar balloon.
So these are the variables for each of the 24 balloons
online 49 you would call a variable called a year is variable or is set to close to documental get men
by day and have passed the you know balloons.
So there's what this would do and these you know balance also variable What will what like 40 and I
am is when all the balloons have been popped to display a message and this is the I.D. tool.
It will grab to display the message.
They said Deve call this if they see a mouse they will look for that deep tugging at it and then display
the relevant message to reflect the or the balloons have been popped.
So next day we're going to do is quit the function that will enable the popin of the balance.
So this is a function that will be responsible for popping the balloon.
So a line 51 defined a variable.
They're called to find the function used the word function followed by the name Belum pop.
That would be the name of a function and I have passed it a balloon variable.
So inside the function in between the parentheses online one and the parentheses on in between the three
the curly braces on line on to 1 and like 7 2 is what the function will do.
So a pass to the variable quad balloon variable horror.
Let me explain what this function does.
I've got about three functions here so the main function which is on line to one is a function of chord.
Balloon Popper and I've passed it a Param if there are balloon variable like fifty three.
Of course the variable there which is a variable that was passed in like 5 to 1 and I have trashed an
event listener saw what the event listener would do if the event listener will listen up for some activities
of the mouse event.
This now takes him to paramotor the first will be the mouse over mousehole as busily when you move your
mouse over an element.
The second is a function called Pop balloon.
Alright so the hongchang pop ballon was weird to find out online 55 saw it the event now takes in two
values of Param if there's the mouse over maybe pop balloon function.
Muzzle is is an event.
When you move your mouse over something.
So basically what you see it while they function online 55 is same for the pop balloon function as the
function though.
Pop the balloon.
What he's saying is that if the balloon variable that was defined in like the one if this doubt the
background style the C S S is strictly equal to none.
That is if there's no background style at all then on line 57 is seen in that text will be empty.
But if like 59 seeing if the first condition of 56 is not true or is not met then try.
The condition in life 59 which says if the balloon if the bag frankau law if there is something there
is a background kolok then pop devoutness pop diba alone.
There's a background call or let me there.
Balloons available then trigger the text pops away you move your mouse over it.
It all displayed text pop so the event listener will be listening for any miles that goes over the balloon.
Only if there is imbalance visible it all display detects pop and they admit the balloon will disappear
from the screen line 61.
Same thing with its skull like a back up to like 60 saying.
There's streatley no star left in the background it would be none.
So was the balloonist pop.
We don't expect any background colloid game for Lebanon because the balloons should be off the screen.
That's what he's saying that background stalder background should be none.
Line 66 again.
The variable but the bulk variable.
We've touched on another event listener and this one takes scene three values.
The first is a mouse out event.
That means when the mouse is out of the balloon pod is whole hour of force.
So what is saying that when you move your mouse out of the balloon not should not pop or there's no
ballon to pop.
That's why he takes in a bullion value.
Force is a value which means true of force.
So when you move your mouse away from the balloon either there's nothing there to pop or the pop will
not occur cause the mouse is out of the balloon.
It's not over it.
Line 6 see it word a function pop is over.
So when you've actually popped the balloon the balance variable will display in that teks which is equal
to this quote here.
So what about Tex goof.
You've defined the text I've defined.
Well sure would be pop when the balloon is popped.
We just pop right which is this one here and this.
That's why that function is sane.
Then you have to list each of the balance as I've done here from line seventy three all the way to a
line 96.
So Blue and how familiar detect these will be the variables.
Now when defined in the function.
We need to find a way to celebrate or illustrate that or the balloons have been popped.
So we need to create a function to do that.
So like 98.
Two hundred and five.
Like 98.
Were you indeed documents that had event list now.
So we're adding an event list now and we've posted a few parameters if the past the mouseover the no
ballons function and also a bullion value of force.
So online 99 we define a function code no balloons function.
So we've got an if statement there we saying that if ballew 0 and the background is attached to it is
streatley None.
And balonne one listowel background attached to it is treacly none.
So this process is the same.
So you did the same for all the balloons.
So you see.
And balonne 1. star background is strictly equazen None.
Same thing with BALLAnd to dos tower that background gradually to last all the way to twenty three.
So what that is saying is that if all the values have disappeared from the screen that means even though
streatley no background colour or light labella's have gone that's where that statement is to be then
display the text online 100 and to display this text this is your style display display detects.
Hmm block then Windle don't scroll.
So if you allow scroll and this blee or the text that says we popped all the balloons.
So that's basically what this function is doing.
So it would be called Wayne or these buller's had been popped.
So I will say this.
And then we can have a look and see if we can pop some balloons.
All right.
We've got a balance so we just fusee move the mouse over them and you see them pop where you each one
pop you see a text that displays pop.
Hopefully just refreshed.
Okay.
Always make sure you save your work.
I forgot to say hands they didn't respond initially so now family members of you say pop pop pop pop
pop pop pop pop pop when our lead balloon as you know is far more mamzer way then pop it doesn't pop.
Alright so pop pop pop.
And then I can get a message to see wars.
And this is a last function that displays this métis War or the balloons have been popped.
So that's it for this project.
We successfully created a balloon popping game.
Thanks for watching.
Help is being used for play around with some of the values make it he can actually add to look for ways
to improve it to be.
And in a popping sound run a dandy text display.
You could make it pop and make it make it naturally sound so you can explore what you can do to take
this further.
Thanks for watching.
Bye for now.